import { InputNumber, Tag, Tooltip } from "antd";
import "./CardList.css";
import { Typography } from "antd";

const Card = ({ item = {}, onPointChange = () => {} }) => {
  const { Text } = Typography;
  return (
    <>
      <div className="card-list-item">
        <div style={{ display: "flex" }}>
          <div className="card-list-item-question">
            <Tooltip
              title={item.question.split("\n").map((d, i) => (
                <div key={i}>{d}</div>
              ))}
            >
              <Tag color="blue" style={{ width: "100%", cursor: "default" }}>
                <Text ellipsis>{item.question}</Text>
              </Tag>
            </Tooltip>
          </div>
          <div className="card-list-item-answer">
            <Tooltip
              title={item.answer.split("\n").map((d) => (
                <p>{d}</p>
              ))}
            >
              <Tag color="green" style={{ width: "100%", cursor: "default" }}>
                <Text ellipsis>{item.answer}</Text>
              </Tag>
            </Tooltip>
          </div>
        </div>
        <div style={{ display: "flex", height: "35px", alignItems: "center" }}>
          <div>分数 :&nbsp;</div>
          <div className="card-list-item-point">
            <InputNumber
              min={0}
              value={item.point}
              onChange={(value) => onPointChange({ id: item.id, point: value })}
            />
          </div>
        </div>
      </div>
    </>
  );
};

export default Card;
